<template>
    <div :style="mainStyle">
        <navigation-bar :title="productName" :onLeftButtonClick="function(){
        toBack()}" :rightIcon="' '"></navigation-bar>
        <web :src="url" :style="webStyle"></web>
        <div class="cart">
            <text class="price">￥{{product.price}}</text>
            <wxc-button text=" +  加入学习" type="red"
                        :btn-style="{width:'300px', margin:'0px',height:'70px',borderRadius:'36px', backgroundColor: '#00BB9A'}"
                        @wxcButtonClicked="CreateOrder"></wxc-button>
        </div>
    </div>
</template>

<style scoped>
    .cart{
       position: fixed;
        width:750px;
        height:120px;
        bottom: 0;
        border-top:1px solid #EEEEEE;
        background-color:#fafafa;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding:30px
    }
    .price{
        height:60px;
        font-size:36px;
        color:#FF0000;
        font-weight:bold;
    }
</style>

<script>
  import NavigationBar from '../widget/NavigationBar.vue'
  import { getEntryPageStyle } from '../../config/Config'
  import event from '../../core/net/event'
  import { Utils ,WxcButton} from 'weex-ui'

  export default {
    components: {
      NavigationBar,
      WxcButton
    },
    data: () => {
      return {
        productId: '',
        product:{
        },
        productName:'',
        url:'',
        mainStyle: {},
        webStyle: {height: '1334px', width: '750px'},
      }
    },
    methods: {
      init() {
        if (this.getQuery().product) {
          this.productId = this.getQuery().product
          this.url = `http://user.test.yarsenal.com/app/product-desc/${this.productId}`
        }
        this.loadProduct();
      },
      loadProduct(){
        event.getProductDesc(this.productId)
          .then((res) => {
            if (res && res.data) {
              this.product = res.data
              this.productName = this.product.name
            }
          })
      },
      CreateOrder(){
        this.jumpWithParams("CreateOrder", {
          product: this.productId,
        })
      }
    },
    created () {
      this.mainStyle = getEntryPageStyle(Utils)
      this.init()
    },
    activated: function () {
      //keep alive
      if (WXEnvironment.platform === 'Web') {
        this.init();
      }
    },
  }
</script>
